<template>
  <div class="BrandShopBanner clearfix">
    <!-- <div class="BrandShop">
      <img src="../assets/clock.jpg" alt="每日推荐" />
      <h3>每日推荐</h3>
      <h2>DAILYBEST</h2>
    </div> -->
    <div class="BrandShop"><el-image :src="BrandShop"></el-image></div>
    <ul>
      <li class="Gooditem_li" v-for="item in BrandShopGoods" :key="item.index">
        <GoodItem :item="item" />
      </li>
    </ul>
  </div>
</template>

<script>
import GoodItem from "@/components/GoodItem.vue";
import { getIndexBrandsGoodsLists } from "@/apis/getData.js";
import { onMounted, ref } from "vue";
export default {
  name: "IndexBrandShop",
  props: {
    count: Number,
  },
  components: {
    GoodItem,
  },
  setup(props) {
    // 初始化旗舰栏展示数据
    const BrandShop = ref();
    const BrandShopGoods = ref();
    const count={count:props.count};
    onMounted(() => {
      getIndexBrandsGoodsLists(count).then((res) => {
        BrandShop.value = res.data.data[0];
        BrandShopGoods.value = res.data.data[1];
      });
    });

    return {
      BrandShop,
      BrandShopGoods,
    };
  },
};
</script>

<style scoped>
.clearfix {
  *zoom: 1;
}
.clearfix:after {
  visibility: hidden;
  clear: both;
  display: block;
  content: ".";
  height: 0;
}

.BrandShopBanner {
  width: 1200px;
  margin: 25px auto;
}
.BrandShop {
  float: left;
  width: 200px;
  height: 290px;
  text-align: center;
  margin-left: 70px;
}

.Gooditem_li {
  list-style: none;
  background: #fff;
  float: left;
}
</style>